<template>
    <div class="top">
        <el-card class="card">
            <div id="echarts1" class="echarts"></div>
        </el-card>
        <el-card class="card">
            <div id="echarts2" class="echarts"></div>
        </el-card>
        <el-card class="card">
            <div id="echarts3" class="echarts"></div>
        </el-card>
        <el-card class="card">
            <div id="echarts4" class="echarts"></div>
        </el-card>
    </div>
    <el-card class="card1">
        <div id="echarts5" class="echarts5"></div>
        <div class="table">
            <table>
            <tr>
                <td>排名</td>
                <td>岗位</td>
                <td>人数</td>
            </tr>
            <tr>
                <td>1</td>
                <td>服务员</td>
                <td>20</td>
            </tr>
            <tr>
                <td>2</td>
                <td>文员</td>
                <td>12</td>
            </tr>
            <tr>
                <td>3</td>
                <td>销售</td>
                <td>7</td>
            </tr>
            <tr>
                <td>4</td>
                <td>设计</td>
                <td>7</td>
            </tr>
            <tr>
                <td>5</td>
                <td>人事</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>经理</td>
                <td>5</td>
            </tr>
            <tr>
                <td>7</td>
                <td>主管</td>
                <td>4</td>
            </tr>
            <tr>
                <td>8</td>
                <td>人力</td>
                <td>4</td>
            </tr>
            <tr>
                <td>9</td>
                <td>行政</td>
                <td>4</td>
            </tr>
            <tr>
                <td>10</td>
                <td>管理</td>
                <td>4</td>
            </tr>
            <tr>
                <td>11</td>
                <td>其他</td>
                <td>3</td>
            </tr>
        </table>
        </div>
    </el-card>
    <el-card class="card1">
        <div id="echarts6" class="echarts6"></div>
    </el-card>

</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from "vue"

const echarts1 = () => {
    var chartDom = document.getElementById('echarts1');
    var myChart = echarts.init(chartDom);
    let option = {
        title: {
            text: '性别分布',
            // subtext: 'Fake Data',
            left: 'center',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            show: false
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                data: [
                    { value: 8, name: '男' },
                    { value: 2, name: '女' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}
const echarts2 = () => {
    var chartDom = document.getElementById('echarts2');
    var myChart = echarts.init(chartDom);
    let option = {
        title: {
            text: '年龄分布',
            // subtext: 'Fake Data',
            left: 'center',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            show: false
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                data: [
                    { value: 2, name: '16-20岁' },
                    { value: 4, name: '21-30岁' },
                    { value: 3, name: '31-40岁' },
                    { value: 1, name: '41-50岁' },
                    { value: 3, name: '50岁以上' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}
const echarts3 = () => {
    var chartDom = document.getElementById('echarts3');
    var myChart = echarts.init(chartDom);
    let option = {
        title: {
            text: '学历分布',
            // subtext: 'Fake Data',
            left: 'center',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            show: false
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                data: [
                    { value: 60, name: '初中' },
                    { value: 30, name: '高中' },
                    { value: 8, name: '中校' },
                    { value: 20, name: '中专' },
                    { value: 30, name: '大专' },
                    { value: 80, name: '本科' },
                    { value: 15, name: '硕士' },
                    { value: 1, name: '博士' },
                    { value: 10, name: '博后' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}
const echarts4 = () => {
    var chartDom = document.getElementById('echarts4');
    var myChart = echarts.init(chartDom);
    let option = {
        title: {
            text: '经验分布',
            // subtext: 'Fake Data',
            left: 'center',
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            show: false
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                data: [
                    { value: 5, name: '应届生' },
                    { value: 30, name: '一年' },
                    { value: 8, name: '二年' },
                    { value: 1, name: '三年' },
                    { value: 8, name: '三年-五年' },
                    { value: 15, name: '五年-十年' },
                    { value: 10, name: '十年以上' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}
const echarts5 = () => {
    var chartDom = document.getElementById('echarts5');
    var myChart = echarts.init(chartDom);
    let option = {
        xAxis: {
            type: 'category',
            data: ['服务员', '文员', '销售', '设计', '人事', '经理', '主管','人力','行政','管理','其他','其他','其他','其他']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [20, 12, 7, 7, 5, 5, 4,4,4,4,3,3,3,3,3,2,2,2,2,2,2,2,2,2,],
                type: 'bar'
            },
        ],
    };

    option && myChart.setOption(option);
}
const echarts6 = () => {
    var chartDom = document.getElementById('echarts6');
    var myChart = echarts.init(chartDom);
    let option = {
  title: {
    text: '求职者活跃度'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

    option && myChart.setOption(option);
}

onMounted(() => {
    echarts1()
    echarts2()
    echarts3()
    echarts4()
    echarts5()
    echarts6()
})

</script>

<style scoped>
.top{
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.card {
    margin: 10px;
    width: 25%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.echarts {
    width: 300px;
    height: 300px;
}


.card1{
    margin: 10px;
}
.echarts5 {
    float: left;
    width: 1000px;
    height: 300px;
}
.table{
    float: left;
    width: 400px;
}

table{
    font-size: 16px;
}
tr:nth-child(2n+1){
    background-color: aliceblue;
}
td{
    width: 300px;
    text-align: center;
    /* border:1px solid #000; */
}
.echarts6 {
    width: 100%;
    height: 300px;
}
</style>